<!--
 * @Author: your name
 * @Date: 2021-09-15 10:18:13
 * @LastEditTime: 2021-09-16 14:55:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\planuser\components\pieEchart.vue
-->
<template>
    <div>
        <V-echart
            :tag="tags"
            title="文件类型分布"
            :loading="false"
            :datas="option"
            height="383px"
        ></V-echart>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import VEchart from '../../../../components/echarts/EchartsTEmp.vue'

const props = {
    datas: Object,
    tag: String,
}
export default defineComponent({
    name: 'TypeEchart',
    components: {
        VEchart,
    },
    props,
    setup(props) {
        let option = ref()
        let tags = ref()
        watch(
            () => props.datas,
            () => {
                tags.value = props.tag
                let datas = props.datas
                option.value = {
                    title: {
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc',
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                    },

                    color: [
                        '#45C2E0',
                        '#C1EBDD',
                        '#FFC851',
                        '#5A5476',
                        '#1869A0',
                        '#FF9393',
                    ],
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: datas.value.sort((a, b) => a.value - b.value),
                            roseType: 'radius',
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay(idx) {
                                return Math.random() * 200
                            },
                        },
                    ],
                }
            },
        )

        return {
            option,
            tags,
        }
    },
})
</script>

<style></style>
